<template>
  <el-table
    :data="tableData"
    style="
      width: 450px;
      border: 1px solid var(--el-card-border-color);
      box-shadow: var(--el-box-shadow-light);
      padding-bottom: 10px;
      margin: 20px;
    "
  >
    <el-table-column prop="curriculum" label="课程" width="112" />
    <el-table-column prop="daybuy" label="今日购买" width="112" />
    <el-table-column prop="daybuy" label="本月购买" width="112" />
    <el-table-column prop="daybuy" label="总购买" width="112" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    curriculum: "oppo",
    daybuy: "500",
    monthbuy: "3500",
    totalbuy: "22000",
  },
  {
    curriculum: "vivo",
    daybuy: "300",
    monthbuy: "2200",
    totalbuy: "24000",
  },
  {
    curriculum: "苹果",
    daybuy: "800",
    monthbuy: "6500",
    totalbuy: "65000",
  },
  {
    curriculum: "小米",
    daybuy: "1200",
    monthbuy: "6500",
    totalbuy: "245000",
  },
  {
    curriculum: "三星",
    daybuy: "300",
    monthbuy: "2000",
    totalbuy: "34000",
  },
  {
    curriculum: "魅族",
    daybuy: "350",
    monthbuy: "3000",
    totalbuy: "22000",
  },
];
</script>

<style scoped lang="scss">
.breadcrumb {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.homeuser {
  background: rgb(255, 255, 255);
}
.image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>
